<template>
  <!-- 主页 -->

  <div class="my-home">
    <!-- 头部 -->
    <div class="header">
      <div class="city" @click="btnClick">
        <img id="ig1" src="../assets/icon/geographic.svg" alt="" />
        <span>广州</span>
      </div>

      <router-link to="/personal">
        <img id="ig2" :src="img" alt=""
      /></router-link>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img src="../assets/img/img1.jpeg" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/img/img2.jpeg" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/img/img3.jpeg" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 招租租客 -->
    <div class="tenant">
      <ul class="top-ul">
        <li>
          <router-link to="/find"><a href="#">查找租客</a></router-link>
        </li>
        <li>
          <router-link to="/home/sonResource"
            ><a href="#">添加房源</a></router-link
          >
        </li>
        <li>
          <router-link to="/buy"><a href="#">电子合同</a></router-link>
        </li>
      </ul>
      <ul class="bottom-ul">
        <li><a href="#">招租管理</a></li>
        <li>
          <router-link to="/particulars"><a href="#">中意租客</a></router-link>
        </li>
        <li><a href="#">评价中心</a></li>
      </ul>
    </div>
    <!-- 租后管理 -->
    <div class="management">
      <p><strong>租后管理</strong></p>
      <ul>
        <li>
          <router-link to="/home/sonResource">
            <a href="#"
              ><img src="../assets/icon/房源.svg" alt="" />我的房源</a
            ></router-link
          >
        </li>
        <li>
          <a href="#"><img src="../assets/icon/租客.svg" alt="" />我的租客</a>
        </li>
        <li>
          <a href="#"><img src="../assets/icon/账单.svg" alt="" />我的账单</a>
        </li>
        <li>
          <router-link to="/buy"
            ><a href="#"
              ><img src="../assets/icon/合同.svg" alt="" />我的合同</a
            ></router-link
          >
        </li>
      </ul>
    </div>

    <!-- 装修房屋 -->
    <div class="management">
      <p><strong>装修房屋</strong></p>
      <ul>
        <li @click="getFitment('装修')">
          <a href="#"><img src="../assets/icon/装修.svg" alt="" />装修</a>
        </li>
        <li @click="getFitment('改造')">
          <a href="#"><img src="../assets/icon/改造.svg" alt="" />改造</a>
        </li>
        <li @click="getFitment('翻新')">
          <a href="#"><img src="../assets/icon/墙面翻新.svg" alt="" />翻新</a>
        </li>
        <li @click="getFitment('维修')">
          <a href="#"><img src="../assets/icon/维修.svg" alt="" />维修</a>
        </li>
      </ul>
      <div class="overlayer" @touchmove.prevent v-if="isText">
        <div class="box">
          <h3>提示</h3>
          <span> 当前城市暂时未开通{{ str }}服务</span>
          <p @click="hidden">确定</p>
        </div>
      </div>
    </div>

    <!-- 优选租客 -->
    <div class="good-tenant">
      <div class="top">
        <span><strong>优选租客</strong></span>
        <router-link to="/find"><span class="more">更多</span></router-link>
      </div>
      <div v-for="(item, index) in res" :key="item.id">
        <section class="tenant-message">
          <img :src="item.portrait" alt="" />
          <div class="tt-message">
            <router-link :to="{ name: 'Details', query: { id: item.id } }">
              <div class="sir">
                <strong>{{ item.name }}</strong>
                |
                <span class="bg1">{{ item.methods }}</span>
                <span class="bg2">{{ item.age }}岁</span>
              </div>
              <p>预计租期:{{ item.term }}</p>
              <p>期望入住时间: {{ item.date }}</p>
            </router-link>
            <!-- 收藏心心 -->
            <img
              :src="item.bol == true ? src2 : src1"
              alt=""
              class="image"
              @click="getIndex(index)"
            />
          </div>
        </section>

        <div class="choie">
          <ul>
            <li>
              <p>意向区域</p>
              <span>{{ item.city }}</span>
            </li>
            <li>
              <p>租金范围</p>
              <span>{{ item.rent }}/月</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
import VDistpicker from "v-distpicker";
import { mapMutations, mapState } from "vuex";

export default {
  computed: {
    ...mapState(["iscollet"]),
    ...mapState(["message"]),
    ...mapState(["all"]),
  },
  components: { VDistpicker },
  name: "Home",
  data() {
    return {
      isShow: false,
      res: [],
      str: "",
      isText: false,
      src: "",
      img: require("../assets/img/curry.jpg"),
      isPro: false,
      tempImg: "",
      src1: require("../assets/icon/love.svg"),
      src2: require("../assets/icon/loveing.svg"),
      da: [],
    };
  },
  methods: {
    ...mapMutations(["collet"]),
    ...mapMutations(["allTenant"]),
    // 获取点击租客的下标
    getIndex(index) {
      this.res[index].bol = !this.res[index].bol;
      console.log(this.res[index].bol);
      if (this.res[index].bol == true) {
        this.collet(this.res[index]);
        localStorage.setItem("userInfo", JSON.stringify(this.res));
      } else {
        localStorage.setItem("userInfo", JSON.stringify(this.res));
      }
    },
    //租客信息的方法
    getData() {
      let url = "data/home.json";
      let pro = axios.get(url);
      pro.then((res) => {
        res.data.result.map((v) => {
          v.bol = false;
        });
        this.res = res.data.result;
        console.log("输出", this.res);
        this.allTenant(this.res);
      }),
        pro.catch((err) => {
          console.log(err);
        });
    },
    // 上传头像
    // 间接调用文件选择框
    handelup(e) {},
    // 选择文件
    up(e) {
      this.$refs.filei.dispatchEvent(new MouseEvent("click"));
      // 获取待上传的文件对象
      let file = e.target.files[0];
      // 声明一个读取文件对象
      let reader = new FileReader();
      // 开始读取文件内容
      reader.readAsDataURL(file);
      // 读取操作结束时触发dass
      reader.onloadend = (ev) => {
        // 赋值给vue对象属性
        this.tempImg = ev.target.result;
        console.log(this.tempImg);
      };
    },
    myProfile(res) {
      this.src = res;
      console.log(src);
    },
    // 地理位置选择方法
    btnClick() {
      this.isShow = true;
    },

    //装修房屋的方法
    getFitment(name) {
      this.str = name;
      this.isText = true;
    },
    hidden() {
      this.isText = false;
    },

    // 轮播图方法
    myInit() {
      // 执行定时器函数
      this.timer = setInterval(() => {
        this.autoPlay();
      }, 2000);
    },
    autoPlay() {
      // 计算ul的位置
      this.index++;
      this.distanceX = -this.index * this.width;
      this.flag = true;

      // 设置导航点高亮
      this.square++;
      if (this.square >= 3) {
        this.square = 0;
      }
    },
    addMouseEnter() {
      clearInterval(this.timer);
    },
    addMouseLeave() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.autoPlay();
      }, 1500);
    },
    addClick(i) {
      // console.log(i);// 当前点击的导航点的索引值
      this.flag = true;
      this.index = i; //赋值给图片索引值
      this.square = i; //赋值给导航点索引值
      this.distanceX = -this.index * this.width; //计算动画的位置
    },
    // 这个监听过渡结束的事件
    myTransitionEnd() {
      // console.log("图片索引值:",this.index);
      if (this.index >= 3) {
        //判断是否动画切换至最后一个li标签
        this.index = 0; // 设置索引值
        this.flag = false; //移除过渡
        this.distanceX = 0; // ul标签瞬间回到0的位置
      }
    },
  },

  //用钩子调用函数
  mounted() {
    this.myInit();
  },
  created() {
    let m = JSON.parse(localStorage.getItem("message"));
    if (m) {
      this.img = m.portrait;
    }
    this.da = this.all;
    let u = JSON.parse(localStorage.getItem("userInfo"));

    if (u) {
      this.res = u;
    } else {
      this.getData();
    }
  },
};
</script>

<style lang="scss" scoped>
.my-home {
  // 头部
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    .city {
      text-align: center;
      font-size: 14px;
    }

    #ig1 {
      width: 20px;
      height: 20px;
      padding-left: 10px;
      padding-top: 5px;
      vertical-align: bottom;
    }

    #ig2 {
      width: 35px;
      height: 35px;
      border: 0px solid black;
      border-radius: 50%;
      margin-top: 5px;
      margin-right: 10px;

      box-sizing: border-box;
    }
    .mask-profile {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      .box {
        width: 200px;
        height: 100px;
        text-align: center;
        margin: 280px auto;
        background-color: rgb(243, 236, 236);
        // background-image: url(../assets/img/bj.png);
        border-radius: 10px;
        img {
          width: 30px;
        }
      }
    }
  }

  // 轮播图
  .banner {
    width: 90%;
    height: 130px;
    // margin-top: 20px;
    position: relative;
    overflow: hidden;
    margin: 5px auto;
    img {
      width: 100%;
      height: 130px;
    }
  }
  //招租租客
  .tenant {
    width: 90%;
    height: 100px;
    margin: 0 auto;

    ul {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      margin-top: 3px;

      li:nth-child(1) {
        width: 39%;
        height: 49px;
      }

      li {
        padding: 5px;
        box-sizing: border-box;
        background-color: #f2f5f9;
        width: 29%;
        text-align: center;
        line-height: 35px;
        a {
          color: rgb(241, 236, 236) !important;
        }
      }
    }
    .top-ul {
      li:nth-child(1) {
        // background-image: url(../assets/img/1.jpg);
        background-color: #6d9df1;
      }
      li:nth-child(2) {
        // background-image: url(../assets/img/2.jpg);
        background-color: #06b666;
      }
      li:nth-child(3) {
        // background-image: url(../assets/img/3.jpg);
        background-color: #179888;
      }
    }
    .bottom-ul {
      li:nth-child(1) {
        background-color: #179888;
      }
      li:nth-child(2) {
        // background-image: url(../assets/img/5.jpg);
        background-color: #06b666;
      }
      li:nth-child(3) {
        background-color: #6d9df1;
      }
    }
  }
  //租后管理  装修房屋
  .management {
    width: 90%;
    height: 100px;
    // border: 1px solid black;
    margin: 15px auto;
    font-size: 14px;
    border-bottom: 1px solid rgb(219, 212, 212);

    p {
      margin: 0;
    }
    ul {
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-around;

      li {
        a {
          img {
            width: 25px;
            height: 25px;
            display: block;
            margin: 5px auto;
          }
        }
      }
    }
    /*遮罩层*/
    .overlayer {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      // background-color: gray;
      // opacity: 0.9;
      .box {
        width: 200px;
        height: 100px;
        text-align: center;
        margin: 280px auto;
        background-color: rgb(243, 236, 236);
        // background-image: url(../assets/img/bj.png);
        border-radius: 10px;
        h3 {
          padding: 5px 0;
        }
        span {
          padding: 15px 0;
          border-bottom: 1px solid rgb(212, 209, 209);
        }
        p {
          width: 100%;
          height: 50px;
          text-align: center;
          line-height: 70px;
          color: blue;
        }
      }
    }
  }
  //优选租客
  .good-tenant {
    width: 90%;
    font-size: 14px;
    margin: 0 auto;
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .more {
        color: blue;
      }
    }
    .tenant-message {
      display: flex;
      margin-top: 15px;
      position: relative;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
      }
      .image {
        position: absolute;
        right: 0;
        top: 20px;
        width: 20px;
        height: 20px;
      }
      .tt-message {
        margin-left: 10px;

        p {
          // padding: .5px;
          margin: 5px;
          color: gray;
        }
        .sir {
          display: flex;
          strong {
            margin-right: 8px;
          }
          .bg1 {
            display: block;
            width: 30px;
            text-align: center;
            background-color: #4783f7;
            color: rgb(243, 239, 239);
            margin-left: 8px;
            font-size: 12px;
          }
          .bg2 {
            padding: 1px;
            box-sizing: border-box;
            background-color: rgb(236, 230, 230);
            margin-left: 5px;
            font-size: 12px;
          }
        }
      }
    }
    .choie {
      margin-top: 10px;
      ul {
        display: flex;
        justify-content: space-between;
        li:nth-child(1) {
          border-right: 1px solid rgb(240, 233, 233);
          padding-right: 5px;
        }
        li {
          width: 50%;
          text-align: center;
          border-bottom: 1px solid rgb(236, 229, 229);
          padding-bottom: 10px;

          p {
            margin: 0;
          }
          span {
            color: rgb(233, 109, 26);
          }
        }
      }
    }
  }
}
</style>
